<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="#" method="get">
        <input type="text" name="username">
        <select name="hobby" id="">
            <option value="1">1</option>
            <option value="12">12</option>
            <option value="3">3</option>
            <option value="4">4</option>

        </select>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
    <script>
        /* 
            依赖于表单行为


            1 focus
                表单聚焦事件
            
            2 blur
                表单失去焦点 

            3. change
               文本框 聚焦和失焦进行对比 内容不一样 触发 
               下拉框 改变就触发 
            4. input
                实时触发
                表单输入 只要在表单内输入  删除都会触发 
            5. submit 
                表单提交事件
                只有form 才能把数据提交出去 
                所以 submit这个事件类型只能绑在 form上   
            6. reset 
                表单重置事件 
                重置是整个表单重置 
                所以 reset 这个事件类型只能绑在 form上   
        
        */


        //获取元素 

        // var inp = document.querySelector("input[type=text]");
        // console.log(inp);

        // inp.onfocus = function(){
        //     console.log('焦点移入');
        // }


        // inp.onblur = function(){
        //     console.log('焦点移出');
        // }


        // inp.onchange = function(){
        //     console.log('内容发生了变化');
        // }


        // var se = document.querySelector('select');
        // se.onchange = function(){
        //     console.log('你修改了选项');   
        // }


        // var inp = document.querySelector("input[type=text]");

        // inp.oninput = function(){
        //     console.log('你正在输入和删除');
        // }
    
        // inp.onsubmit = function(){
        //     console.log('提交了');
        // }  // 绑在非form标签上没用


        var form = document.querySelector("form");

        // form.onsubmit = function(){
        //     console.log('提交了');
        // }


        form.onreset = function(){
            console.log('重置');
        }
    </script>
</body>
</html>